<template>
    <div class="template-index-Lu">
      <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
          <a-form layout="inline" class="search-form" >
              <a-form-item>
                  <a-button class="blue-btn" @click="viewRor(row)">办理</a-button>
              </a-form-item>
          </a-form>
        </template>
      </commpVxeTable>
      <applicationForm ref="applicationFormRef" :formData="formData" :linkName="linkName" :stepNums="stepNums"  @success="success"></applicationForm>
    </div>
  </template>
  <script>
  import assessCheckApi from './service/api.js'
  import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
  import applicationForm from '../index/applicationForm.vue'
  export default {
    components: {
      commpVxeTable,
      applicationForm,
    },
    props:{
      linkName:{
        type:String,
        default:'',
        required:false,
      }
    },
    data() {
      return {
        reCommpVxeTable: '',
        dataTableConfig: {
          api: assessCheckApi.list,
          rowId: 'id',
          urlType: true,
          paramet:{
            fhjmc: this.linkName,
          }
        },
        columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '拟稿人',
          field: 'fngr',
          width: 100,
        },{
          title: '拟稿科室',
          field: 'fngks',
          width: 150,
        },{
          title: '信息名称',
          field: 'fxxmc',
        },{
          title: '发布栏目',
          field: 'ffblm',
        },{
          title: '发送时间',
          field: 'ffssj',
        }, {
          title: '操作',
          field: 'jobid',
          width: 100,
          titleInterval:true,
          slots: {
          // 使用插槽模板渲染
            header:'data1_header',
            default: 'operation_btn',
          },
        }
      ],
        formItem: [
            {
                label: '拟稿科室',
                model: 'fngks',
            }
        ],
        jobidList: [],
        stepNums: 0,
        formData: {},
        reJobid: '',
        oaId: '',
      }
    },
    created(){
      this.stepNums = Number(this.stepNum)
    },
    methods: {
       // 勾选
       checkboxChange(val){
        //console.log('已选择',val)
        this.jobidList = []
        if(val.length){
          val.forEach(item => {
              this.jobidList.push(item.jobid)
          });
        }
      },
      // 搜索
      searchEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
        //console.log(this.dataTableConfig.paramet)
      },
      // 重置
      resetEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
      },
      // 办理
      viewRor(row){
        this.formData = {
          ...row
        }
        this.formData.id = row.oaid

        let jobid = row.jobid
        // queryJobByJobId({jobid:jobid}).then(res => {
        //   //console.log(res)
        // })
        this.$nextTick(_ => {
              this.$refs.applicationFormRef.applicationFormVisible= true
          })
      },
      // 弹窗提交成功
      success(){
        // 刷新表格 清空id数组
        this.$refs.administrativeOffice.resetEvent()
        this.jobidList = []
      },
    },
  }
  </script>
  <style>
  @import url('../../css/oaClass.css');
  </style>
